<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <p>
            <span>你好</span>
            <span>九九</span>
            <span>很高兴</span>
            <span>认识你</span>
        </p>
    </div>
    <div id="span">我是idspan</div>
    <div class="cla">我是cla 1</div>
    <div class="cla">我是cla 2</div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script>
        var ele=document.querySelectorAll("ul");
        var elechild=ele[0].childNodes;
        var eleparsent=ele[0].parentNode;
        console.log(elechild);
        console.log(eleparsent);
        //兄弟
        var obj=document.querySelector("#span");
        obj.nextSibling;
        obj.previousSibling;
//         Obj.firstChild：当前节点的子层级的中的第一个节点
        // Obj.lastChild：当前节点的子层级的中的最后一个节点
        // 在只有一个子节点的情况下，firstChild 和lastChild 指向同一个节点。
        // 如果没有子节点，那么 firstChild 和 lastChild 的值均为 null
        var ulnode=document.querySelector("ul");
        // var linode=document.querySelectorAll("li");
        var p=document.createElement("p");
        var text1=document.createTextNode("你好");
        var text="哈哈";
        ulnode.appendChild(text1);
        ulnode.insertBefore(p,text1)
        ulnode.children
    </script>
    <script>
        //什么是DOm
        //dom 是对以html文档的一个api  允许对html 操作
        //document.documentElement
        //获取Dom的两大类
        //NodeList[query]和HTMLCollection[数组]

        //节点类型  
        /*
         * 节点{
         *      子节点 childNodes [NodeList]----childrens
         *      父节点    parsentNode  [父元素]
         *              牢记，子节点中文字[换行]和符号都会成为其中的一个节点！！！
         *      兄弟节点{
         *          nextsibling[下一个] ----nextElementSibling
         *          previoussibling[上一个]---- previousElementSibling：
         *      }
         *      守卫{
         *          firstChild[当前节点 子节点同层级第一个]-----firstElementChild：
        *           lastChild ----lastElementChild：
         * }
         * }
         */
        /*
            节点的方法
                判断   {父}.hasChildnodes();  [判断该匀速是否有子节点]

                添加 appendchild(节点)

                插入  insertBefore(新,基础)

                删除 {父},removechild()   {子},renove()

                元素深度[clsslist]{
                    节点.classList{
                        add remove toggle contains
                    }
                    元素Tagname


                }

                节点的创建{
                    document.createElement(“元素的标签名称”)；
                            创造的元素默认是放在内存空间，不会在网页上
                            显示，如果想让它在网页上显示，那么就要通过
                            DOM方法，把元素加入到网页上来。
                            比如apendChild或是insertBefore等
                    document.createDocumentFragment()

                }
        */
        //  var ele1=document.getElementById("span");
        //  var ele2=document.getElementsByClassName("cla");
        //  var ele3=document.getElementsByTagName("span");
        //  var ele=document.querySelectorAll("span");
        //  console.log(ele1);
        //  console.log(ele2);
        //  console.log(ele3);
        //  console.log(ele);


    </script>
</body>

</html>